<!-- 商品分类 -->
<template>
  <div>
    <head-top shopText="商品分类" shopBtnText="刷 新"></head-top>
    <section id="main">
      <div class="head">
        <span>数据列表</span>
        <div style="
                  width: 200px;
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                ">
        <!-- <el-upload
            :auto-upload="false"
            :before-upload="beforeUpload"
            class="upload-demo"
            action="url"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">导入分类</el-button>
                </el-upload> -->
          <p></p>
          <el-button style="background-color: #1CB09A;">
            <router-link to="/home/Shop/AddShopClass" style="color: #fff;">添加分类</router-link>
          </el-button>
        </div>
      </div>
      <el-table :data="GetShopClassList" border style="width: 100%">
        <el-table-column prop="categoryId" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="categoryName" label="分类" align="center">
        </el-table-column>
        <el-table-column prop="icon" label="分类图标" align="center">
          <template v-slot="scoped">
            <el-image style="width: 100px; height: 100px" :src="scoped.row.icon"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="级别" align="center">
        </el-table-column>
        <el-table-column prop="secondcount" label="商品数量" align="center">
        </el-table-column>
        <el-table-column prop="status" label="是否上架" align="center">
          <template v-slot="scoped">
            <el-switch :value="scoped.row.status == 0" @change="isGrounding(scoped.row.categoryId)" active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="recommendation" label="首页推荐" align="center">
          <template v-slot="scoped">
            <el-switch v-model="scoped.row.recommendation == 1" @change="isRecommend(scoped.row.categoryId)"
              active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="seq" label="排序" align="center">
        </el-table-column>
        <el-table-column prop="" label="设置" align="center">
          <template v-slot="scoped">
            <el-button type="text" size="small">
              <router-link :to="{
                path: '/home/Shop/AddShopClass',
                query: { categoryId: scoped.row.categoryId },
              }">新增下级</router-link></el-button>
            <el-button type="text" size="small">
              <router-link :to="{
                path: '/home/Shop/ViewShopSub',
                query: { categoryId: scoped.row.categoryId },
              }">查看下级</router-link></el-button>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="100px" align="center">
          <template v-slot="scoped">
            <el-button type="text" size="small">
              <router-link :to="{
                path: '/home/Shop/EditShopClass',
                query: { categoryId: scoped.row.categoryId },
              }">编辑</router-link></el-button>
            <el-button type="text" size="small">
              <router-link to=""><span @click="delBtn(scoped.row.categoryId)">删除</span></router-link></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin: 30px auto">
        <el-pagination background align="center" :page-size="pageSize" @current-change="handleCurrentChange"
          layout="total,prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </section>
    <router-view></router-view>
  </div>
</template>
<script>
import HeadTop from "@/components/Shop/HeadTop.vue";
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
import BeforeUpload from "@/utils/beforeUpload";
export default {
  components: {
    HeadTop,
  },
  data() {
    return {
      GetShopClassList: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      fileList: [], //保存上传的文件
      url: "", //文件请求的地址
    };
  },
  mounted() {
    this.getClassListAndPage();
  },
  methods: {
    ...mapActions("shop", [
      "getShopClassList",
      "UpdateShopClass",
      "DelShopClassById",
    ]),

    // 根据分类id删除分类
    delBtn(delId) {
      let id = delId;
      this.DelShopClassById(id).then((res) => {
        console.log("删除请求中的id", id);
        console.log("删除请求", res);
        this.getClassListAndPage();
        this.open();
      });
    },
    open() {
      this.$message("删除成功");
    },
    // 查询数据并分页
    getClassListAndPage() {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      this.getShopClassList({ currentPage, pageSize })
        .then((res) => {
          this.GetShopClassList = res.data;
          this.total = res.count;
          console.log("getshopclasslist", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 判断当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getClassListAndPage();
    },
    //判断是否推荐
    isRecommend(categoryId) {
      console.log(categoryId);
      let obj = this.GetShopClassList.find((item) => {
        return item.categoryId == categoryId;
      });
      obj.recommendation = obj.recommendation == 1 ? 0 : 1;
      this.UpdateShopClass(obj).then((res) => {
        console.log(res);
      });
      console.log(this.GetShopClassList);
    },
    //判断是否上架
    isGrounding(categoryId) {
      console.log(categoryId);
      let obj = this.GetShopClassList.find((item) => {
        return item.categoryId == categoryId;
      });
      obj.status = obj.status == 1 ? 0 : 1;
      console.log("obj", obj);
      this.UpdateShopClass(obj).then((res) => {
        console.log(res);
      });
      console.log(this.GetShopClassList);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}?`);
    },
    //限制上传文件类型
    beforeUpload() {
      BeforeUpload;
    },
  },

  computed: {},
};
</script>
<style scoped>
a {
  text-decoration: none;
  color: #409eff;
}

#main {
  width: 96%;
  margin: auto;
}

.head {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #f0f0f0;
  border: 1px solid #e4e4e4;
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
}

.head button:nth-child(2) {
  height: 34px;
}

.head button:nth-child(2) a {
  color: black;
  text-align: center;
  text-decoration: none;
}

.head span {
  margin-left: 20px;
}

::v-deep .has-gutter tr th {
  background-color: #f5f5ff;
  text-align: center;
}

::v-deep .el-table_1_column_9 .cell,
::v-deep .el-table_1_column_10 .cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::v-deep .el-table_1_column_9 .cell a,
.el-table_1_column_10 .cell a {
  color: skyblue;
  text-decoration: none;
  font-size: 12px;
}
</style>